<template>
  <div>
    <el-tabs
      type="border-card"
      style="margin: 0 20px; height: 93vh"
      @tab-click="tabChange"
      v-model="$store.state.activeName6"
    >
      <el-tab-pane label="区域分析" name="区域分析">
        <RegionalAnalysis></RegionalAnalysis>
      </el-tab-pane>
      <el-tab-pane label="站点分析" name="站点分析">
        <el-form inline :model="form">
          <el-form-item label="选择风险等级">
            <el-select size="mini" v-model="formst.value" @change="getItemls">
              <el-option
                :value="it.value"
                :label="it.label"
                :key="it.id"
                v-for="it in formst"
                >{{ it.label }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              type="datetime"
              placeholder="选择开始时间"
              size="mini"
              v-model="form.startTime"
              default-time="00:00:00"
              :picker-options="startTimePicker"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              type="datetime"
              placeholder="选择结束时间"
              size="mini"
              v-model="form.endTime"
              default-time="00:00:00"
              :picker-options="endTimePicker"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="riskLnquiry"
              >查询</el-button
            >
          </el-form-item>

          <el-row>
            <el-button-group v-for="item in anegrade" :key="item.sensorNumber">
              <el-button type="primary" size="mini" @click="querybutton(item)">{{
                item.sensorName
              }}</el-button>
            </el-button-group>
            <el-button-group v-for="item in twograde" :key="item.sensorNumber">
              <el-button type="primary" size="mini" @click="querybutton(item)">{{
                item.sensorName
              }}</el-button>
            </el-button-group>
            <el-button-group
              v-for="item in threegrade"
              :key="item.sensorNumber"
            >
              <el-button type="primary" size="mini" @click="querybutton(item)">{{
                item.sensorName
              }}</el-button>
            </el-button-group>
            <el-button-group v-for="item in fourgrade" :key="item.sensorNumber">
              <el-button type="primary" size="mini" @click="querybutton(item)">{{
                item.sensorName
              }}</el-button>
            </el-button-group>
          </el-row>
        </el-form>
        <el-table :data="tableData" stripe v-loading="loading">
          <el-table-column
            prop="sensorNumber"
            label="设备编号"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="dataGx"
            label="x方向值"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="dataGy"
            label="y方向值"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="dataH"
            label="h方向值"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="totalx"
            label="x方向累计值"
            align="center"
            width="85"
          ></el-table-column>
          <el-table-column
            prop="totaly"
            label="y方向累计值"
            align="center"
            width="85"
          ></el-table-column>
          <el-table-column
            prop="totalh"
            label="h方向累计值"
            align="center"
            width="85"
          ></el-table-column>
          <el-table-column
            prop="totalp"
            label="平面方向累计值"
            align="center"
            width="85"
          ></el-table-column>
          <el-table-column
            prop="gxSpeed"
            label=" x变形速率"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="gySpeed"
            label="y变形速率"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="ghSpeed"
            label=" h变形速率"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="gpSpeed"
            label="平面变形速率"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="accex"
            label="x方向加速度"
            align="center"
            width="85"
          ></el-table-column>
          <el-table-column
            prop="accey"
            label="y方向加速度"
            align="center"
            width="85"
          ></el-table-column>
          <el-table-column
            prop="acceh"
            label="h方向加速度"
            align="center"
            width="85"
          ></el-table-column>
          <el-table-column
            prop="accep"
            label="平面方向加速度"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="dataCount"
            label="统计数量"
            align="center"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="theDate"
            label="时间"
            align="center"
            width="90"
          ></el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-col :span="10">
            <el-pagination
              background
              :current-page.sync="pageData.currentPage"
              layout="total, prev, pager, next, jumper"
              :total="pageData.count"
              :page-size="pageData.pageSize"
              @current-change="handleCurrentChange"
              v-if="pageData.count != 0"
            >
            </el-pagination>
          </el-col>
        </el-row>
        <img src="./test.png" width="100%" style="margintop: 10vh" alt="" />
      </el-tab-pane>
      <el-tab-pane label="参数设置" name="参数设置">
        <ParameterSetting :parameter="node"></ParameterSetting>
      </el-tab-pane>
      <el-tab-pane label="预测分析" name="预测分析">
        <el-form inline :model="form2">
          <el-form-item label="选择监测点">
            <!-- <el-select size="mini"></el-select> -->
          </el-form-item>
          <el-form-item label="统计时间类型">
            <el-select v-model="form2.timeType" size="mini">
              <el-option label="每24小时" value="24"></el-option>
              <el-option label="每12小时" value="12"></el-option>
              <el-option label="每6小时" value="6"></el-option>
              <el-option label="每2小时" value="2"></el-option>
              <el-option label="每1小时" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="info" size="mini">预测</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" size="mini">导出</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData2" stripe>
          <el-table-column
            prop="forecast"
            label="预测时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dataGxs"
            label="WGS84-Δx(mm)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dataGys"
            label="WGS84-Δy(mm)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dataH2"
            label="WGS84-ΔH(mm)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dataGp"
            label="WGS84-ΔP(mm)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="gxSpeed"
            label="WGS84-Vx(mm/24h)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="gySpeed"
            label="WGS84-Vy(mm/24h)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ghSpeed"
            label="WGS84-Vh(mm/24h)"
            align="center"
          ></el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-col :span="10">
            <el-pagination
              background
              :current-page="pageData2.currentPage"
              layout="total, prev, pager, next, jumper"
              :total="pageData2.count"
              :page-size="pageData2.pageSize"
              @current-change="handleCurrentChange2"
              v-if="pageData2.count && pageData2.count != 0"
            >
            </el-pagination>
          </el-col>
        </el-row>
        <img src="./test.png" width="100%" style="margintop: 10vh" alt="" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../common/service.config";
import RegionalAnalysis from "../risk-analysis/regional-analysis";
import ParameterSetting from "../risk-analysis/parameter-setting";
Axios.defaults.withcredentials = true;

export default {
  name: "RiskAnalysisChart",
  props: {
    node: Object,
  },
  components: { RegionalAnalysis, ParameterSetting },
  data() {
    return {
      anegrade: [],
      twograde: [],
      threegrade: [],
      fourgrade: [],
      form: {
        timeType: "24",
        startTime: moment().subtract(1, "months").format("YYYY-MM-DD"), //设置为当前时间的前一个月
        endTime: moment().format("YYYY-MM-DD 00:00:00"), //设置为当前时间
        startTimeMin: null,
      },
      formst: [
        { id: 1, value: "ane", label: "一级风险" },
        { id: 2, value: "two", label: "二级风险" },
        { id: 3, value: "three", label: "三级风险" },
        { id: 4, value: "four", label: "四级风险" },
      ],
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },

      form2: {
        timeType: "24",
        startTime: null,
        endTime: moment().format("YYYY-MM-DD 00:00:00"),
        startTimeMin: null,
      },
      tableData2: null,
      pageData2: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      loading: false,
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.startTime
            ? time.getTime() < new Date(this.form.startTimeMin).getTime() ||
              time.getTime() > new Date(this.form.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime()
            : false,
      };
    },
    startTimePicker2() {
      return {
        disabledDate: (time) =>
          this.form2.startTime
            ? time.getTime() < new Date(this.form2.startTimeMin).getTime() ||
              time.getTime() > new Date(this.form2.endTime).getTime()
            : false,
      };
    },
    endTimePicker2() {
      return {
        disabledDate: (time) =>
          this.form2.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form2.startTime).getTime()
            : false,
      };
    },
  },
  methods: {
    tabChange(tab) {
      this.$store.commit("setTabName6", tab.paneName);
    },
    singlePoint(list) {
      for (let i = 0, len = list.length; i < len; i++) {
        list[i].label = this.node.label;
        list[i].theDate = moment(list[i].theDate).format("YYYY-MM-DD HH:mm:ss");
      }
      this.tableData = list;
    },
    //查询站点分析的数据（可更改传入时间）
    async riskLnquiry() {
      this.loading = true;
      let queryData = {
        startTime: moment(this.form.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD"),
        timeType: this.form.timeType,
      };
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"page\\":{\\"currentPage\\":${this.pageData.currentPage},\\"pageSize\\":2}}",
              "serviceCode": "listRiskAnalyisDataByPageProcessor",
              "timestamp": "",
              "uuid": ""}`,
      }).then((res) => {
        // console.log(res)
        this.loading = false;
        if (res.data.parameter) {
          this.pageData = res.data.parameter.page;
          this.tableData = res.data.parameter.list;
          let list = res.data.parameter.list;
          this.singlePoint(list);
        } else {
          this.pageData = {
            currentPage: 1,
            count: 1,
            pageSize: 5,
          };
          this.tableData = null;
        }
      });
    },
    //选择风险等级 显示出各风险等级下的设备按钮
    async getItemls(val) {
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{}","serviceCode":"listRiskSensorProcessor","timestamp":"","uuid":""}`,
      }).then((res) => {
        console.log(res);
        if (val == "ane") {
          this.anegrade = res.data.parameter.oneLevelList;
        } else {
          this.anegrade = !res.data.parameter.oneLevelList;
        }
        if (val == "two") {
          this.twograde = res.data.parameter.twoLevelList;
        } else {
          this.twograde = !res.data.parameter.twoLevelList;
        }
        if (val == "three") {
          this.threegrade = res.data.parameter.threeLevelList;
        } else {
          this.threegrade = !res.data.parameter.threeLevelList;
        }
        if (val == "four") {
          this.fourgrade = res.data.parameter.fourLevelList;
        } else {
          this.fourgrade = !res.data.parameter.fourLevelList;
        }
      });
    },
    //点击各风险等级下的设备按钮触发当前设备编号的站点分析数据
    async querybutton(item) {
      this.loading = true;
      let queryData = {
        startTime: moment(this.form.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD"),
        timeType: this.form.timeType,
      };
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${item.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"page\\":{\\"currentPage\\":${this.pageData.currentPage},\\"pageSize\\":2}}",
              "serviceCode": "listRiskAnalyisDataByPageProcessor",
              "timestamp": "",
              "uuid": ""}`,
      }).then((res) => {
        this.loading = false;
        if (res.data.parameter) {
          this.pageData = res.data.parameter.page;
          this.tableData = res.data.parameter.list;
          let list = res.data.parameter.list;
          this.node.sensorNumber = item.sensorNumber;
          this.singlePoint(list);
        } else {
          this.pageData = {
            currentPage: 1,
            count: 1,
            pageSize: 5,
          };
          this.tableData = null;
          this.node.sensorNumber = item.sensorNumber;
        }
      });
    },
    handleCurrentChange(val) {
      this.riskLnquiry(val);
    },
    handleCurrentChange2(val) {
      this.riskLnquiry(val);
    },
  },
  created() {
    this.riskLnquiry();
    this.tableData = [];
    this.pageData = {
      currentPage: 1,
      count: 1,
      pageSize: 5,
    };
    this.tableData2 = [
      {
        dataGxs: -3.2,
        dataGys: -31.5,
        dataH2: -14.6,
        dataGp: 31.7,
        gxSpeed: 0.4,
        gySpeed: -0.2,
        ghSpeed: -0.9,
        forecast: "2021-01-22 00:00:00",
      },
      {
        dataGxs: -3.2,
        dataGys: -31.5,
        dataH2: -14.6,
        dataGp: 31.7,
        gxSpeed: 0.4,
        gySpeed: -0.2,
        ghSpeed: -0.9,
        forecast: "2021-01-21 00:00:00",
      },
      {
        dataGxs: -3.2,
        dataGys: -31.5,
        dataH2: -14.6,
        dataGp: 31.7,
        gxSpeed: 0.4,
        gySpeed: -0.2,
        ghSpeed: -0.9,
        forecast: "2021-01-20 00:00:00",
      },
      {
        dataGxs: -3.2,
        dataGys: -31.5,
        dataH2: -14.6,
        dataGp: 31.7,
        gxSpeed: 0.4,
        gySpeed: -0.2,
        ghSpeed: -0.9,
        forecast: "2021-01-19 00:00:00",
      },
    ];
    this.pageData2 = {
      currentPage: 1,
      count: 4,
      pageSize: 5,
    };
  },
};
</script>
